<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>故障信息筛选</title>
    <link type="text/css" rel="stylesheet" href="../css/troubleMessageFilter.css">
    <link type="text/css" rel="stylesheet" href="../dependency/bootstrap/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="../dependency/font-awesome-4.5.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../dependency/paginator/jqPaginator.css">
    <script src="../dependency/jquery/jquery.min.js"></script>
    <script src="../dependency/bootstrap/js/bootstrap.min.js"></script>
    <script src="../dependency/paginator/jqPaginator.min.js"></script>
    <script src="../dependency/jquery/jquery.min.js"></script>
    <script src="../dependency/bootstrap/js/bootstrap.min.js"></script>

    <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<!--管理系统-->
<div class="top" id="top">
    <h1>中央空调管理系统</h1>
    <ul>
        <li><a href="deviceControlBox2.html">设备监控</a></li>
        <li class="active"><a href="troubleMessageFilter.html">故障信息</a></li>
        <li><a href="administraor.html">账户管理</a></li>
    </ul>
    <span>admin, 退出</span>
</div>
<!--故障信息表-->
<div class="table-box">
    <div class="trouble-count">总故障数：<span>24</span></div>
    <!--筛选框-->
    <form role="form">
        <div class="sub-menu-name">
            <label><input type="checkbox"><span>全选</span></label>
            <label><input type="checkbox"><span>办公室一</span></label>
            <label><input type="checkbox"><span>会议室</span></label>
            <label><input type="checkbox"><span>多功能厅</span></label>
            <label><input type="checkbox"><span>会议室一</span></label>
            <label><input type="checkbox"><span>主多工能厅</span></label>
        </div>
        <div class="sub-menu-position">
            <label><input type="checkbox"><span>全选</span></label>
            <label><input type="checkbox"><span>室内</span></label>
            <label><input type="checkbox"><span>室外</span></label>
        </div>
    </form>
    <!--信息表-->
    <div id="trouble-message">
        <table class="table-bordered table-striped">
            <tr>
                <th>机器名<i class="fa fa-filter" onclick="display(event,'sub-menu-name')"></i></th>
                <th>机器位置<i class="fa fa-filter" onclick="display(event,'sub-menu-position')"></i></th>
                <th>故障描述</th>
            </tr>
            <tr v-for="todo in todos">
                <td>{{todo.name}}</td>
                <td>{{todo.position}}</td>
                <td>{{todo.message}}</td>
            </tr>
        </table>
    </div>
    <!--页码-->
    <div id="page" class="pagination"></div>

</div>
<script src="../js/changeTop.js"></script>
<script src="../js/changePage.js"></script>
<script src="../js/showTroubleMessage.js"></script>
<script src="../js/displayCheckBox.js"></script>
<script src="../js/getData.js"></script>
</body>
</html>